<template>
  <div class="news-list">
    <!-- <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()"> -->
    <el-form :inline="true" :model="dataForm">
      <el-form-item>
        <el-input v-model="dataForm.name" placeholder="新闻标题" clearable style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="queryList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="newsAddOrUpdateVisible = true">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="dataList" border style="width: 100%">
      <el-table-column prop="name" label="新闻标题" header-align="center" align="center"></el-table-column>
      <el-table-column prop="sort" label="排序" header-align="center" align="center"></el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="180">
        <template v-slot="scope">
          <el-button type="primary" link @click="hanldeUpdate(scope.row.id)">修改</el-button>
          <el-button type="primary" link @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="dataForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="dataForm.limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"> </el-pagination>

    <NewsAddOrUpdate :visible="newsAddOrUpdateVisible" :currId="currId" @refresh-data-list="handleRefreshDataList" @close="newsAddOrUpdateVisible = false" />
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import NewsAddOrUpdate from "./news-add-or-update.vue";
import baseService from "@/service/baseService";
import { ElMessageBox, ElMessage } from "element-plus";

let dataForm = reactive({
  page: 1,
  limit: 10
});
let total = ref(0);
let loading = ref(false);
let dataList = ref([]);
let currId = ref("");

let newsAddOrUpdateVisible = ref(false);

onMounted(() => {
  queryList();
});

function pageSizeChangeHandle(size) {
  dataForm.page = 1;
  dataForm.limit = size;
  queryList();
}

function pageCurrentChangeHandle(curr) {
  dataForm.page = curr;
  queryList();
}

function handleRefreshDataList() {
  newsAddOrUpdateVisible.value = false;
  queryList();
}

function hanldeUpdate(id) {
  console.log(id);
  currId.value = id;
  newsAddOrUpdateVisible.value = true;
}

const queryList = async () => {
  let { code, data } = await baseService.get("/sys/news/page", dataForm);
  if (code === 0) {
    dataList.value = data.list;
    total.value = data.total;
  }
}

const handleDelete = async (id) => {
  ElMessageBox.confirm("确定进行[删除]操作?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      baseService.delete(`/sys/news`, [id]).then(({ code }) => {
        if (code === 0) {
          ElMessage.success({ message: "删除成功" });
          queryList();
        }
      });
    })
    .catch(() => {
      //
    });
};
</script>

<style lang="scss" scoped>

</style>
